<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        <a href="https://threejs.org/manual/#zh/lights">light - threejs official manual, 写的实在太好了</a>
        <a href="http://www.webgl3d.cn/pages/b9504a/">光源对物体表面影响</a>
        1. 材质
           MeshBasicMaterial (opens new window)不会受到光照影响
           漫反射网格材质MeshLambertMaterial (opens new window)会受到光照影响
           一般使用：MeshStandardMaterial，更具物理质感 
        2. 光源
           环境光AmbientLight 半球面光 HemisphereLight: 四周全量
           点光源PointLight、平行光DirectionLight会阴影
           <a href="https://blog.csdn.net/huhuan123456/article/details/109217496">HemisphereLight和AmbientLight 区别</a>
           <a href="https://threejs.org/examples/#webgl_lights_hemisphere">半球光示例</a>
           半球面光源直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色。
           半球光不能投射阴影, 但是有明暗变化；

           环境光会均匀的照亮场景中的所有物体。
           环境光不能用来投射阴影，因为它没有方向。

        
    </div>

    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 创建三大件
        // 1.1 三维场景Scene, 类似创建了个世界，三维世界
        const scene = new THREE.Scene();
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // MeshBasicMaterial MeshLambertMaterial MeshPhongMaterial
        const material = new THREE.MeshPhongMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: false,//开启透明
            opacity: 0.5,//设置透明度
        });

        const mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh)

        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(10);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 50);
        camera.position.set(4, 2, 4)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true,
        });
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, canvasDom);
        // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
        controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件


        // 2. 打光 PointLight DirectionalLight HemisphereLight
        // const light = new THREE.PointLight(0xffffff, 1.0);
        const light = new THREE.HemisphereLight(0xffffff, 0xccccc, 1.0);
        // const light = new THREE.AmbientLight (0xffffff, 1.0);
        light.position.set(6, 0, 3);
        scene.add(light);

        renderer.setClearColor(0x444444, 1); //设置背景颜色
        renderer.render(scene, camera);
    </script>
</body>

</html>